<template>
    <div>
        <top-nav></top-nav>
        <div class="page-main">
            <el-row class="page-top-operate">
                <lb-button size='medium' type='primary' opType='add' @click="$router.push('/fitness/courseEdit')">新增</lb-button>
            </el-row>
            <div class="page-top-operate form-search">
                <el-form @submit.native.prevent :inline="true" :model="searchForm">
                   <el-form-item label="课程类型">
                        <el-select placeholder="请选择" v-model="searchForm.status">
                            <el-option v-for="item in statusOptions" :key="item.id" :label="item.title" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程目的">
                        <el-select placeholder="请选择" v-model="searchForm.status">
                            <el-option v-for="item in statusOptions" :key="item.id" :label="item.title" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程日期">
                        <el-date-picker v-model="searchForm.date" type="daterange" value-format="timestamp" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="关键字">
                        <el-input v-model="searchForm.name" placeholder="课程名称/员工名称/门店名称"></el-input>
                    </el-form-item>
                    <lb-button size='medium' type='primary' opType='add' @click="handleSearch">{{$t('action.search')}}</lb-button>
                </el-form>
            </div>
            <el-table :data="tableData"  :header-cell-style="{background:'#f5f7fa',color:'#606266'}" style="width: 100%">
                <el-table-column prop="id" label="序列号">
                </el-table-column>
                <el-table-column prop="name" label="课程名称">
                </el-table-column>
                <el-table-column prop="culture" label="课程图片">
                </el-table-column>
                <el-table-column prop="price" label="课程价格">
                </el-table-column>
                <el-table-column prop="type" label="课程类型">
                </el-table-column>
                <el-table-column prop="objective" label="课程目的">
                </el-table-column>
                <el-table-column prop="introduction" label="课程简介">
                </el-table-column>
                 <el-table-column prop="create_time" label="新增时间">
                </el-table-column>
                <el-table-column prop="address" width="180px" label="操作">
                    <template slot-scope="scope">
                        <div class="table-operate">
                            <lb-button size='mini' plain type='primary' @click="$router.push('/course/edit?id=' + scope.row.id)">{{$t('action.edit')}}</lb-button>
                            <lb-button size='mini' plain type='danger' @click="confirmDelGoods([scope.row.id])">{{$t('action.delete')}}</lb-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <lb-page :batch='false' :page='searchForm.page' :pageSize='searchForm.limit' :total='total' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange'>
            </lb-page>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      searchForm: {
        name: '',
        type: '',
        objective: '',
        date: '',
        page: 1,
        limit: 10
      },
      tableData: [],
      total: 0,
      objectiveList: [],
      typeList: [],
      statusOptions: [
        {
          id: '',
          title: '全部'
        },
        {
          id: 1,
          title: '待开始'
        },
        {
          id: 2,
          title: '已开始'
        },
        {
          id: 3,
          title: '已结束'
        }
      ]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList (type = 1) {
      let param = this.searchForm
      if (param.date.isArray) {
        param.start_time = param.date[0]
        param.end_time = param.date[1]
      } else {
        param.start_time = ''
        param.end_time = ''
      }
      let res = await this.$api.getCourseList(param)
      this.tableData = res.data.data
      this.total = res.data.total
    },
    handerTimeChange (val) {
      this.getList()
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getList()
    },
    handleSearch () {
      this.searchForm.page = 1
      this.getList(2)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
